<template>
  <swiper :coverflow-effect="swiperOption.coverflow" :effect="'coverflow'" :loop="true" :slides-per-view="2.8" :autoplay="swiperOption.autoplay" :navigation="swiperOption.navigation" class="swiper-container _swiper" :pagination="swiperOption" @slideChange="onSlideChange()">
    <swiper-slide class="swiper-slide">
      <div class="swiperImage">
        <img src="@/assets/images/page-home.png" style="width:60%;height:300px" alt="" />
      </div>
    </swiper-slide>
    <swiper-slide class="swiper-slide">
      <div class="swiperImage">
        <img src="@/assets/images/page-home.png" style="width:60%;height:300px" alt="" />
      </div>
    </swiper-slide>
    <swiper-slide class="swiper-slide">
      <div class="swiperImage">
        <img src="@/assets/images/page-home.png" style="width:60%;height:300px" alt="" />
      </div>
    </swiper-slide>
    <swiper-slide class="swiper-slide">
      <div class="swiperImage">
        <img src="@/assets/images/page-home.png" style="width:60%;height:300px" alt="" />
      </div>
    </swiper-slide>
    <swiper-slide class="swiper-slide">
      <div class="swiperImage">
        <img src="@/assets/images/page-home.png" style="width:60%;height:300px" alt="" />
      </div>
    </swiper-slide>
    <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-prev">
      <!-- <img src="@/assets/images/prev2.png" alt="" /> -->
    </div>
    <div class="swiper-button-next">
      <!-- <img src="@/assets/images/next2.png" alt="" /> -->
    </div>
  </swiper>

</template>
<script setup>
import { reactive, watch } from 'vue'
import SwiperCore, { EffectCoverflow, Navigation, Pagination, A11y, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.min.css'
import 'swiper/components/pagination/pagination.scss'
SwiperCore.use([Navigation, Pagination, EffectCoverflow, A11y, Autoplay])
let swiperOption = reactive({
  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
  },
  coverflow: {
    rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。
    stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。
    depth: 150, //slide的位置深度。值越大z轴距离越远，看起来越小。
    modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
    slideShadows: false, //开启slide阴影。默认 true。
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
const c_swiper = document.getElementsByClassName("_swiper")
const swiperIdx = ref(0)

watch(swiperIdx, (newL) => {
  console.log('%c [ newL ]-66', 'font-size:13px; background:#8b9c4f; color:#cfe093;', newL)

})
function onSlideChange () {
  swiperIdx.value = c_swiper[0].swiper.activeIndex
}
</script>